<template>
    <div class="">
    <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i> 用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
        	<el-form :inline="true"  class="demo-form-inline">
        		<el-form-item label="手机：">
					<el-input v-model="mobile" @keyup.enter.native="onphonenumber" placeholder="请输入用户手机" clearable style="width:200px;"></el-input>
				</el-form-item>
				<el-form-item label="昵称：">
					<el-input v-model="nick_Name" @keyup.enter.native="onNickname" placeholder="请输入用户昵称" clearable style="width:200px;"></el-input>
				</el-form-item>
					<el-form-item label="真实姓名：">
						<el-input v-model="identityName" @keyup.enter.native="onActualname" placeholder="请输入真实姓名" clearable style="width:200px;"></el-input>
				</el-form-item> 
				<el-form-item label="认证状态：">
					<el-select style="width:200px" v-model="identityStatus" @change="handleselect" placeholder="认证状态" >
						<el-option 
						v-for="item in optionsPrise"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item> 
				<!-- <el-form-item label="是否为冻结用户：">
					<el-select style="width:180px" v-model="valueDisabled" placeholder="是否为冻结用户" >
						<el-option
						v-for="item in optionsDisabled"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>  -->
				<el-form-item>
					<el-button type="primary" @click="onSelect()">查询</el-button>
				</el-form-item> 
				<el-form-item> 
					<el-button type="warning" @click="StartReset()">重置</el-button>
				</el-form-item>
			</el-form>		
            <div style="height:40px"></div>
			<el-table v-loading="loading" :data="tableData"  style="width: 100%"   ref="multipleTable">
				<el-table-column prop="id" label="用户ID" width="80" align="center">
				</el-table-column>
				<el-table-column label="用户头像" width="200" align="center">
					<template slot-scope="scope">
						<div><img :src="scope.row.logo" style="width:100px;height:100px"></div>
					</template>
				</el-table-column>
				<el-table-column prop="nick_name" label="用户昵称" width="200" align="center">
				</el-table-column>
				<el-table-column prop="mobile" label="手机号码" width="200" align="center">
				</el-table-column>
				<el-table-column prop="identity_name" label="真实姓名" width="180" align="center">
				</el-table-column>
				<el-table-column prop="email" label="用户邮箱" width="260" align="center">
				</el-table-column>
				<el-table-column prop="identity_statuss" label="身份认证" width="180" align="center">
				</el-table-column>
				<el-table-column  label="操作用户" width="260" align="center">
					<!-- <template slot-scope="scope" >
						<el-switch
						v-model="scope.row.identity_status"
						:active-value="1"
						:inactive-value="0"
						active-text="通过"
						inactive-text="不通过"
						@change="toSetRecommend(scope.$index, scope.row)">
						</el-switch>
					</template> -->
					<template slot-scope="scope" >
						<el-button size="small" type="text" @click="UserDetails(scope.$index, scope.row)">用户详情</el-button>
						<el-button size="small" type="text" @click="Authentication(scope.$index, scope.row)">身份认证</el-button>
					</template>
				</el-table-column>
				
			</el-table>
			
			<div class="pagination" v-show="totalPages > 1">
				<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
				</el-pagination>
			</div>
        </div>
        <!-- 用户详情 -->
		<el-dialog title="用户信息" :visible.sync="UserInfo" top>
			<el-form style="width:500px; margin:0 auto"  label-width="110px">
				<el-form-item label="用户头像：">
					<div><img :src="User_details.logo" style="width:100px;height:100px;"></div>
				</el-form-item>
				<el-form-item label="用户昵称：">
					<div>{{ User_details.nick_name }}</div>
				</el-form-item>
				<el-form-item label="手机号码：">
					<div>{{ User_details.mobile }}</div>
				</el-form-item>
				<el-form-item label="真实姓名：">
					<div>{{ User_details.identity_name }}</div>
				</el-form-item>
				<el-form-item label="用户地址：">
					<div>{{ User_details.UserAddress }}</div>
				</el-form-item>
				<el-form-item label="邮箱地址：">
					<div>{{ User_details.email }}</div>
				</el-form-item>
				<el-form-item label="注册时间：">
					<div>{{ User_details.register_time }}</div>
				</el-form-item>
				<el-form-item label="申请认证时间：">
					<div>{{ User_details.apply_time==""? '未申请':User_details.apply_time }}</div>
				</el-form-item>
				<el-form-item label="账户余额：">
					<div>{{ User_details.balance }}</div>
				</el-form-item>
				<el-form-item label="传 真：">
					<div>{{ User_details.fax==""? '未填写':User_details.fax }}</div>
				</el-form-item>
				<el-form-item label="身份证号：">
					<div>{{ User_details.identity_no==""? '未填写':User_details.identity_no }}</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button style="width:200px;" type="primary" @click="UserInfo=false">返回</el-button>
			</div>
		</el-dialog>
		<!-- 身份认证 -->
		<el-dialog title="身份认证" :visible.sync="CertificationStatus" width="500px" center>
            <el-form style="margin:0 auto" label-width="110px">
				<el-form-item label="认证状态：">
					<template>
						<el-switch
						v-model="radio"
						active-color="#13ce66"
    					inactive-color="#ff4949"
						:active-value="1"
						:inactive-value="0"
						active-text="通过"
						inactive-text="不通过"
						@change="Authentications(radio)">
						</el-switch>
					</template>
				</el-form-item>
				<el-form-item label="认证备注：">
					<el-input v-model="identityRemark" type="textarea" :rows="2" placeholder="请输入审核备注（选填）" clearable style="width:300px;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button style="width:200px;" type="primary" @click="AuditConfirmation()">确认</el-button>
			</div>
        </el-dialog>
        <!-- 删除提示框 -->
        <!-- <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog> -->
        <!-- / 删除提示框 -->
    </div>
</template>
<script>
import { userList, Verification } from '@/api/user';

export default {
    name:"usermanage",
    data() {
        return {
            pageIndex: 1, // 当前页码
            pageSize: 10, // 每页10条
            totalElements: 1, // 默认总条数
            totalPages: 1, // 默认总页数
			tableData: [], // 表格数据
			identityStatus: '-1', // 认证状态
			mobile: '', // 手机号
			nick_Name: '', // 昵称
			identityName: '', // 真实姓名
			loading: true, // 加载状态
			UserInfo: false, // 用户信息弹出框
			CertificationStatus: false, // 身份认证弹出框
			radio: 0, // 状态
            delIndex: 0, //当前选中的下标
			delId: 0,  //当前要删除的Id
			ApprovalStatus: 0, // 审核状态
			identityRemark: '', // 审核备注
            delVisible: false, //默认dialog 不弹出
			type: 0,
			User_details: [], // 用户信息
	        optionsPrise: [{
			          value: '-1',
			          label: '全部'
			        }, {
			          value: '0',
			          label: '未认证'
			        }, {
			          value: '1',
			          label: '已提交待审核'
			        }, {
			          value: '2',
			          label: '审核通过'
			        }, {
			          value: '3',
			          label: '审核未通过'
			        }],
	        }
    },
    //实例创建
    created(){
        // 获取用户列表
        this.getList();
    },
    //计算属性
    computed:{
    	
    },
    //方法
    methods: {
    	// 状态
    	toSetRecommend(index, row){
			var state = row.is_disabled;
			// console.log(row);
    		var id = [];
    		id.push(row.id);
    		if(state == 1){
    			this.toRecomment(id,index);
    		}else{
    			this.toRecommentNo(id,index);
    		}
		},
		// 选中查询
		handleselect(selVal){
			this.pageIndex = 1;
			this.loading = true; // 加载状态
            this.getList();
		},
		// 身份认证
		Authentications(row) {
			if (row === 1) {
				this.ApprovalStatus = 2;
			} else {
				this.ApprovalStatus = 3;
			}
		},
		// 确认身份
		AuditConfirmation() {
			var params = {
			userId: this.Authentication_id, // 用户Id
			identityStatus: this.ApprovalStatus, // 认证状态
			identityRemark: this.identityRemark
			 == ''? '备注':this.identityRemark // 认证备注
			};
			Verification(params).then( res=> {
				if (res.code == 200) {
					this.$message({
                        message: '设置成功',
                        type: 'success'
					});
					this.identityRemark = null; // 清空审核备注
					this.CertificationStatus = false; // 审核弹出框
					this.getList(); // 更新列表
				}
			});
		},
    	//冻结
    	toRecomment(id,index){
    		userIsCool(id).then((response) => {
                if(response.code==200){
                    var data = response.data;//当前返回的数据
					this.$message.success('冻结成功');
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: response.msg
                    });
                }
        	})
    	},
    	//取消冻结
    	toRecommentNo(id,index){
    		userIsHot(id).then((response) => {
                if(response.code==200){
                    var data = response.data;//当前返回的数据
					this.$message.success('取消冻结成功');
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: response.msg
                    });
                }
        	})
    	},
        //获取用户列表
        getList(){
        	var param = {
        		identityStatus: parseInt(this.identityStatus), // 认证状态
				mobile: this.mobile, // 手机号
				nickName: this.nick_Name, // 昵称
				identityName: this.identityName, // 真实姓名
				pageIndex: this.pageIndex, // 页码
				pageSize: this.pageSize // 每页条数
			};
        	userList(param).then( res=> {
                if(res.code == 200){
					var data = res.data; // 当前返回的数据
					data.list.forEach((value, index)=> {
						if(value.province !='' && value.city != ''){
							value.UserAddress = value.province+value.city+value.district; // 地址
						}else{
							value.UserAddress = '未填写';
						}
						value.identity_name = value.identity_name==''? // 设置默认值
						'未实名':value.identity_name;
						value.email = value.email == ''? '未填写':value.email; // 设置默认值
						value.identity_statuss = value.identity_status == 2? '已认证':'未认证'
					});
					this.tableData = data.list; // 列表数据
					this.loading = false; // 加载状态
                    this.totalElements = data.total; // 总条数
                    this.totalPages = Math.ceil(data.total / this.pageSize);//总页数
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: res.msg
                    });
                }
        	})
        },
        //分页
        handleCurrentChange(val){
			this.pageIndex = val;
			this.loading = true; // 加载状态
            this.getList();
		},
		// 手机号回车事件
		onphonenumber() {
			//查询
        	this.onSelect();	
		},
		// 昵称回车事件
		onNickname() {
			//查询
        	this.onSelect();
		},
		// 真实姓名回车事件
		onActualname() {
			//查询
        	this.onSelect();
		},
        //查询
        onSelect(){
			this.pageIndex = 1;
			this.loading = true; // 加载状态
            this.getList();
		},
		// 用户详情
		UserDetails(index, item) {
			this.UserInfo = true; // 用户信息弹出框
			this.User_details = item;
		},
		// 重置搜索
		StartReset() {
			this.identityStatus = '-1'; // 认证状态
			this.mobile = ''; // 手机号
			this.nick_Name = ''; // 昵称
			this.identityName = ''; // 真实姓名
			this.loading = true; // 加载状态
			this.tableData = []; // 清空旧数据
			this.getList(); // 更新列表
		},
		// 身份认证
		Authentication(index, item) {
			this.CertificationStatus = true; // 身份认证弹出框
			this.Authentication_id = item.id; // 认证id
			if(item.identity_status === 2){
				this.radio = 1; // 认证
			}else{	
				this.radio = 0;
			}
		},
    }
}
</script>
<style lang="stylus" scoped>
	.edit{
	    color #ff9800;
	}
	.del{
	    color #e51c23;
	}
	.download{
	    color #67C23A;
	}
</style>


